<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>XX站10kV I 段主接线图与运行参数</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
</head>

<body>
    <div class="table-responsive" style="font-size:14px">
        <table id="mytab" class="table table-hover table-bordered text-center table-striped">
        </table>
    </div>
</body>


<script>
    $('#mytab').bootstrapTable({
        queryParams: "queryParams",
        toolbar: "#toolbar",
        sidePagination: "true",
        striped: true, // 是否显示行间隔色
        //search : "true",
        uniqueId: "ID",
        pageSize: "10",
        // rowStyle: function(value, row, index) {
        //     var style = "";
        //     console.log(row);
        //     console.log(index);
        //     style = 'danger';
        //     if (row % 2 == 1) {
        //         style = 'success';
        //     }
        //     return {
        //         classes: style
        //     }
        // },
        pagination: true, // 是否分页
        sortable: true, // 是否启用排序
        columns: [{
                field: 'id',
                title: '线路编号'
            }, {
                field: 'status',
                title: '开关状态'
            }, {
                field: 'current',
                title: '一相电流'
            }, {
                field: 'power',
                title: '有功功率'
            }, {
                field: 'equmentStatus',
                title: '设备工作状态',
                align: 'center',
                valign: 'middle',
                formatter: actionFormatter,
            },

        ]
    });

    function actionFormatter(value, row, index) {
        var id = value;
        var result = "";
        if (value == 2) {
            result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-record large'  style='color:green;font-size:20px' ></span></a>";

        } else {
            result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-record large'  style='color:red;font-size:20px' ></span></a>";
        }
        return result;
    }
    var statuslist = new Array("开", "关", "开")


    createData();

    setInterval(function() {
        createData();
    }, 5000);

    //生成数据
    function createData() {
        var rows = []; //创建数组   
        for (var i = 1; i < 21; i++) {
            var row = {}; //创建对象
            row.id = "30" + i + "线路";
            var tmp = Math.round((Math.random() * 1) + 1);
            row.equmentStatus = tmp;
            row.status = statuslist[tmp];
            row.current = ((Math.random() * 20) + 1).toFixed(1) + " A"
            row.power = ((Math.random() * 100) + 1).toFixed(1) + " kW";
            rows.push(row);
        }
        //如果sidePagination设置为server, 则数据结构为: {total: 15, rows: [1, 2, 3...]}
        /* var data = {};
        data.total = rows.length;
        data.rows = rows; */

        //如果sidePagination设置为client, 则数据结构为一个数组对象
        $('#mytab').bootstrapTable('load', rows);
    }

</script>
</html>